<template>
  <div class="scan-management-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div class="title">扫描文件管理</div>
        <div class="subtitle">高效管理纸质档案扫描流程</div>
      </div>
    </div>

    <!-- 路由导航 -->
    <div class="route-info">
      <a-breadcrumb>
        <a-breadcrumb-item>
          <router-link to="/files">
            <FolderOutlined />
            档案文件管理
          </router-link>
        </a-breadcrumb-item>
        <a-breadcrumb-item>
          <router-link to="/files/digital-archive">
            <ScanOutlined />
            纸质档案数字化
          </router-link>
        </a-breadcrumb-item>
        <a-breadcrumb-item>
          <FileImageOutlined />
          {{ $route.meta.title }}
        </a-breadcrumb-item>
      </a-breadcrumb>
    </div>

    <!-- 统计卡片 -->
    <div class="stats-section">
      <a-row :gutter="[16, 16]">
        <a-col :xs="24" :sm="6">
          <div class="stat-card">
            <div class="stat-icon">
              <ScanOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">今日扫描</div>
              <div class="stat-value">{{ scanStats.todayScans }}</div>
              <div class="stat-label">份档案</div>
            </div>
          </div>
        </a-col>
        <a-col :xs="24" :sm="6">
          <div class="stat-card">
            <div class="stat-icon">
              <ClockCircleOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">等待扫描</div>
              <div class="stat-value">{{ scanStats.queueCount }}</div>
              <div class="stat-label">份档案</div>
            </div>
          </div>
        </a-col>
        <a-col :xs="24" :sm="6">
          <div class="stat-card">
            <div class="stat-icon">
              <CheckCircleOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">扫描完成</div>
              <div class="stat-value">{{ scanStats.completedScans }}</div>
              <div class="stat-label">份档案</div>
            </div>
          </div>
        </a-col>
        <a-col :xs="24" :sm="6">
          <div class="stat-card">
            <div class="stat-icon">
              <StarOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">质量评分</div>
              <div class="stat-value">{{ scanStats.qualityScore }}</div>
              <div class="stat-label">平均分</div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>

    <!-- 功能操作区 -->
    <div class="actions-section">
      <a-card title="扫描管理" :bordered="false">
        <div class="action-buttons">
          <a-button type="primary" @click="startScan">
            <ScanOutlined />
            开始扫描
          </a-button>
          <a-button @click="pauseScan">
            <PauseCircleOutlined />
            暂停扫描
          </a-button>
          <a-button @click="manageScanners">
            <SettingOutlined />
            扫描设备管理
          </a-button>
          <a-button @click="viewScanHistory">
            <HistoryOutlined />
            扫描历史
          </a-button>
        </div>
      </a-card>
    </div>

    <!-- 扫描任务列表 -->
    <div class="scan-tasks-section">
      <a-card title="扫描任务" :bordered="false">
        <a-table :columns="scanTaskColumns" :data-source="scanTasks" :pagination="{ pageSize: 10 }" row-key="id">
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'status'">
              <a-tag :color="getStatusColor(record.status)">
                {{ record.status }}
              </a-tag>
            </template>
            <template v-if="column.key === 'progress'">
              <a-progress :percent="record.progress" size="small" :status="record.progress === 100 ? 'success' : 'active'" />
            </template>
            <template v-if="column.key === 'action'">
              <a-space>
                <a-button size="small" @click="viewTask(record)">查看</a-button>
                <a-button size="small" @click="pauseTask(record)">暂停</a-button>
                <a-button size="small" danger @click="cancelTask(record)">取消</a-button>
              </a-space>
            </template>
          </template>
        </a-table>
      </a-card>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { HomeOutlined, FolderOutlined, ScanOutlined, FileImageOutlined, ClockCircleOutlined, CheckCircleOutlined, StarOutlined, PauseCircleOutlined, SettingOutlined, HistoryOutlined } from '@ant-design/icons-vue'

// 扫描统计
const scanStats = reactive({
  todayScans: 2456,
  queueCount: 892,
  completedScans: 15678,
  qualityScore: 9.3
})

// 表格列定义
const scanTaskColumns = [
  { title: '任务ID', dataIndex: 'id', key: 'id' },
  { title: '档案类型', dataIndex: 'type', key: 'type' },
  { title: '文件数量', dataIndex: 'fileCount', key: 'fileCount' },
  { title: '扫描进度', key: 'progress' },
  { title: '状态', key: 'status' },
  { title: '开始时间', dataIndex: 'startTime', key: 'startTime' },
  { title: '操作员', dataIndex: 'operator', key: 'operator' },
  { title: '操作', key: 'action', width: 200 }
]

// 扫描任务数据
const scanTasks = ref([
  {
    id: 'ST20231201001',
    type: '生死记录',
    fileCount: 1250,
    progress: 85,
    status: '扫描中',
    startTime: '2023-12-01 09:00:00',
    operator: '李清照'
  },
  {
    id: 'ST20231201002',
    type: '业力档案',
    fileCount: 890,
    progress: 100,
    status: '已完成',
    startTime: '2023-12-01 08:30:00',
    operator: '苏东坡'
  },
  {
    id: 'ST20231201003',
    type: '审判记录',
    fileCount: 2340,
    progress: 45,
    status: '扫描中',
    startTime: '2023-12-01 10:15:00',
    operator: '白居易'
  }
])

// 方法
const getStatusColor = (status) => {
  const colorMap = {
    扫描中: 'processing',
    已完成: 'success',
    等待中: 'default',
    已暂停: 'warning',
    已取消: 'error'
  }
  return colorMap[status] || 'default'
}

const startScan = () => {
  console.log('开始扫描')
}

const pauseScan = () => {
  console.log('暂停扫描')
}

const manageScanners = () => {
  console.log('扫描设备管理')
}

const viewScanHistory = () => {
  console.log('查看扫描历史')
}

const viewTask = (record) => {
  console.log('查看任务:', record)
}

const pauseTask = (record) => {
  console.log('暂停任务:', record)
}

const cancelTask = (record) => {
  console.log('取消任务:', record)
}
</script>

<style lang="scss" scoped>
.scan-management-container {
  padding: 24px;

  .page-header {
    text-align: center;
    margin-bottom: 24px;

    .header-content {
      .title {
        font-size: 28px;
        font-weight: bold;
        color: $secondary-color;
        margin-bottom: 8px;
      }

      .subtitle {
        font-size: 14px;
        color: $text-secondary;
      }
    }
  }

  .route-info {
    margin-bottom: 24px;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid rgba(212, 153, 10, 0.2);
  }

  .stats-section {
    margin-bottom: 24px;

    .stat-card {
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      border: 1px solid rgba(212, 153, 10, 0.2);
      display: flex;
      align-items: center;
      gap: 12px;

      .stat-icon {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: linear-gradient(135deg, $secondary-color, #f0c674);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        color: white;
      }

      .stat-content {
        .stat-title {
          font-size: 14px;
          color: $text-secondary;
          margin-bottom: 4px;
        }

        .stat-value {
          font-size: 24px;
          font-weight: bold;
          color: $primary-color;
          margin-bottom: 2px;
        }

        .stat-label {
          font-size: 12px;
          color: $text-secondary;
        }
      }
    }
  }

  .actions-section,
  .scan-tasks-section {
    margin-bottom: 24px;

    :deep(.ant-card) {
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      border: 1px solid rgba(212, 153, 10, 0.2);
      border-radius: 12px;
    }

    .action-buttons {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
    }
  }
}
</style>
